<template>
    <div>
        <!-- 头像区域 -->
        <div class="avatar-box">
            <van-image class="avatar" round fit="cover" :src="userInfo.photo" />
            <div class="info-box">
                <h4>{{userInfo.name}}</h4>
                <span>{{userInfo.birthday}}</span>
            </div>
        </div>
        <van-grid :border="false" :column-num="3">
            <van-grid-item icon="newspaper-o" text="我的作品" />
            <van-grid-item icon="star-o" text="我的收藏" />
            <van-grid-item icon="tosend" text="阅读历史" />
        </van-grid>
        <van-cell-group>
            <van-cell to="/mine/edit" title="编辑资料" icon="edit" is-link />
            <van-cell to="/mychat" title="小智同学" icon="chat-o" is-link />
            <van-cell title="系统设置" icon="setting-o" is-link />
            <van-cell @click="$store.commit('user/logout')" title="退出登录" icon="info-o" is-link />
        </van-cell-group>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'MyMine',
  computed: {
    // 简化数据访问
    ...mapState('user', ['userInfo'])
  },
  created () {
    this.$store.dispatch('user/reqUserInfo')
  }
}
</script>

<style lang="less" scoped>
.avatar-box {
    @bgColor: #3296fa;
    background-color: @bgColor;
    height: 140px;
    display: flex;
    align-items: center;

    .avatar {
        height: 100px;
        width: 100px;
        margin: 0 20px 0 20px;
    }

    .info-box {
        h4 {
            font-size: 18px;
            margin-bottom: 10px;
            color: #fff;
        }

        span {
            background-color: @bgColor;
            color: #fff;
            padding: 5px, 2px;
        }
    }
}

.van-grid-item {
    color: #8facff;

    &:nth-child(2) {
        color: #f00;
    }

    &:nth-child(3) {
        color: orange;
    }
}
</style>
